<template>
  <div class="app-container">
    <!-- 复制按钮区域 -->
    <div class="copy-controls">
      <el-button 
        type="primary" 
        icon="el-icon-document-copy" 
        @click="copyContent"
        :disabled="!details"
      >
        复制内容
      </el-button>
    </div>
    
    <editor v-model="details" :min-height="600" :content-height="800" :read-only="false" />
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      details:''
    }
  },
  methods: {
    // 复制富文本内容
    copyContent() {
      if (!this.details) {
        this.$message.warning('暂无内容可复制');
        return;
      }
      
      try {
        // 创建临时文本区域来复制纯文本内容
        const textArea = document.createElement('textarea');
        textArea.value = this.details;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        
        this.$message.success('内容已复制到剪贴板');
      } catch (error) {
        console.error('复制失败:', error);
        this.$message.error('复制失败，请重试');
      }
    }
  }
}
</script>

<style scoped>
.copy-controls {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.table-container {
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-header h2 {
  margin: 0;
  color: #303133;
}

.table-controls {
  display: flex;
  gap: 10px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delete-btn {
  color: #f56c6c;
  padding: 0;
  margin-left: 5px;
}

.delete-btn:hover {
  color: #f78989;
}

.table-info {
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.table-info p {
  margin: 0;
}

/* 表格内容区域样式 */
.el-table .el-input {
  width: 100%;
}

.el-table .el-input__inner {
  border: none;
  background: transparent;
}

.el-table .el-input__inner:focus {
  background: #fff;
  border: 1px solid #409eff;
}
</style>

